<template>
<div class="container">

   <div class="navbar_wrap">
      <div class="logo" @click="tohome">
         <img src="../../assets/logo.png" alt="" >
      </div>
      <div class="search">
         <!-- 这里的是一个布局，并不是一个搜索框。而是点击之后跳转到搜索框页面 -->
         <div class="searchInput">
            <p>
               <van-icon class="ipt-icon" name="search" />
               <span>输入关键字</span> 
            </p>
         </div>
      </div>
      <div class="userCover">
         <img :src="img_url" alt="" v-if="img_url" 
            @click="goUserinfo"
          >
         <img src="../../assets/cover.jpg" alt="" v-else @click="$router.push('/userinfo')">
         <p>下载app</p>
      </div>
   </div>

</div>
</template>

<script>

export default {
    data() {
        return {
           img_url:""
        };
    },

    props:[],

    async mounted(){
       if(localStorage.getItem('token')){
          const res = await this.$http.get("/user/" + localStorage.getItem('id'))
          this.img_url = res.data[0].user_img
       }
       
       
    },

    components:{

    },

    methods:{
       goUserinfo(){
         this.$router.push(
            {path: '/userinfo'},
            //本地路由跳转本地
            onComplete => {},
            onAbort => {}
         )
      },

      tohome(){
         this.$router.push(
            {path: '/'},
            //本地路由跳转本地
            onComplete => {},
            onAbort => {}
         )
      }
       
    }


    }
</script>


<style scoped>

   .container{
      background-color: #fff;
   }
   .navbar_wrap{
      display: flex;
      
   }
   .navbar_wrap div{
      height: 12vw;
      display: flex;
      align-items: center;
   }

   .navbar_wrap .logo{
         /* flex: 1.5; */
         width: 21.333vw;
         justify-content: center;
         margin-top:0.8vw;
   }

   .navbar_wrap .logo img{
         width: 100%;
         height: 100%;
   }

   .navbar_wrap .search{
         flex: 1;
         justify-content: center;
         background-color: #ededed;
         border-radius: 1.333vw;
         margin:1.333vw 0.533vw;
   }

   .navbar_wrap .userCover{
         display: flex;
         margin-top:1.333vw;
   }
   .navbar_wrap .userCover img{
         width: 9.333vw;
         height: 9.333vw;
         border-radius: 9.333vw;
         margin-left:1.333vw;
   }
   .navbar_wrap .userCover p{
      font-size: 4vw;
      width: 18.667vw;
      height: 9.333vw;
      text-align: center;
      background-color: #fb7299;
      line-height: 9.333vw;
      color: #fff;
      font-weight: bold;
      border-radius: 0.533vw;
      margin:1.333vw 2.667vw;
      cursor: pointer;
   }


   .search p{
      position: relative;
   }
   .search span{
      font-size:4.267vw;
   }
   .ipt-icon{
      position: absolute;
      left:-8vw;
      font-size:5.867vw;
   }
   

</style>